<template>
  <view class="conversationStatus">
    <up-loading-icon
      v-if="data.status === KKConversationStatus.loading"
      mode="circle"
    ></up-loading-icon>
    <view v-if="data.status === KKConversationStatus.fail" class="row-center">
      <image
        class="conversationStatus-icon"
        src="@/pagesA/static/images/chat/chat_send_fail.png"
        @tap="sendFail"
      ></image>
      <text class="conversationStatus-text" @tap="sendFail">发送失败</text>
    </view>
    <view v-if="data.status === KKConversationStatus.retry" class="row-center">
      <image
        class="conversationStatus-icon"
        src="@/pagesA/static/images/chat/chat_reSend.png"
        @tap="reSendMsg"
      ></image>
      <text class="conversationStatus-text" @tap="reSendMsg">重新发送</text>
    </view>
  </view>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import { ref } from "vue";

import { KKConversationStatus } from "./conversitonEnum";

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
});

const sendFail = () => {
  emit("sendFail", props.data);
};

// 重新发送消息
const reSendMsg = () => {
  emit("reSendMsg", props.data);
};

const emit = defineEmits(["reSendMsg", "sendFail"]);
</script>

<style lang="scss" scoped>
.conversationStatus {
  &-icon {
    width: 36rpx;
    height: 36rpx;
    padding-top: 24rpx;
    padding-bottom: 24rpx;
  }
  &-text {
    padding-left: 16rpx;
    font-size: 28rpx;
    color: #eb2330;
    line-height: 36rpx;
    padding-top: 24rpx;
    padding-bottom: 24rpx;
  }
}
</style>
